import React from 'react';
import ReactDom from 'react-dom';
import About from './view/about'
import asyncComponent from './js/asyComponent'
import './js/main1.jsx'
import './js/main2.jsx'
import { BrowserRouter as Router, Switch, Redirect, Route, Link, HashRouter, RouteChildren } from 'react-router-dom'
const Inbox = asyncComponent(() => import('./view/inbox'));

class App extends React.Component {
  render() {
    return (
      <div className="shopping-list">
      {this.props.children}
        <ul>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/inbox">Inbox</Link></li>
        </ul>
      </div>
    );
  }
}

class Home extends React.Component {
  render() {
    return (
      <HashRouter>
        <Switch>
          <App>
            <Route path="/about" component={About} />
            <Route path="/inbox" component={Inbox} />
          </App>
        </Switch>
      </HashRouter>
    )
  }
}

ReactDom.render(
  <Home />,
  document.getElementById('app')
);